import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import QRCode from 'qrcode.react';
import ReButton from 'components/widgets/ReButton';
import ReIcon from 'components/widgets/ReIcon';
import {CopyToClipboard} from 'react-copy-to-clipboard';


@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'QrCodeDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        return (
            <div onClick={() => this.store.closeDialog()}
                 className={this.store.visible ? 'qr-code-mask fade-in' : 'qr-code-mask fade-out'}>
                <div className="qr-code-wrapper"
                     onClick={(e) => e.stopPropagation()}>
                    <div className="qr-code-header">
                        <span className="header-title">二维码</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div className="qr-code-content">
                        <div className="qr-code-container" id="container">
                            <QRCode value={this.store.codeUrl}
                                    size={200}/>
                        </div>
                        <div className="button-wrapper">
                            <ReButton label={'下载图片'} className="button-confirm"
                                      onClick={() => this.store.downloadImage()}/>
                            <CopyToClipboard text={this.store.codeUrl}>
                                <ReButton label={'复制链接'} className="button-confirm"
                                          onClick={() => this.store.copyUrl()}/>
                            </CopyToClipboard>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-qrcodedialog-root">
                {this.renderDialog()}
            </div>
        );
    }
}